<!--
 * @Author: aliyun3129073295 1718324422@qq.com
 * @Date: 2022-10-26 11:32:20
 * @LastEditors: aliyun3129073295 1718324422@qq.com
 * @LastEditTime: 2022-10-27 09:42:19
 * @FilePath: \xu_vue\src\view\positionManage\components\dataPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="main">
        <div class="nav">
            <span>数据分析</span>
            <i class="el-icon-close" @click="goPosition"></i>
        </div>
        <div class="topOne">
            <div class="title">职位名称：助理工程师</div>
            <div class="content">
                <p class="look">浏览：2313</p>
                <p class="share">接单分享：322</p>
                <p class="signup">报名：12/42</p>
                <p class="complete">完成率：60%</p>
            </div>
        </div>
        <div class="topTwo">
            <div class="title">报名信息<span>下载</span></div>
            <div class="table">
            <el-table
            border
            :data="tableData"
            style="width: 1639px">
            <el-table-column
                prop="name"
                label="姓名"
                width="299">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="227">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄"
                width="224">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号"
                width="392">
            </el-table-column>
        </el-table>
            </div>
            <div class="page">
            <div class="left" @click="reduce">上一页</div>
            <div class="middle"><span>{{currentPage}}</span>/{{totalPage}}</div>
            <div class="right" @click="add">下一页</div>
            </div>
        </div>
        <div class="topTwo three">
            <div class="title1">接单人信息<span>下载</span></div>
            <div class="table">
            <el-table
            border
            :data="tableData1"
            style="width: 1639px">
            <el-table-column
                prop="weixin"
                label="微信号"
                width="495">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号"
                width="647">
            </el-table-column>
        </el-table>
            </div>
            <div class="page">
            <div class="left" @click="reduce">上一页</div>
            <div class="middle"><span>{{currentPage}}</span>/{{totalPage}}</div>
            <div class="right" @click="add">下一页</div>
            </div>
        </div>
        <div class="topFour">
            <div class="title">用户画像</div>
            <div class="echarts1" id="pieOne"></div>
            <div class="echarts2"></div>
            <div class="echarts3"></div>
        </div>
    </div>
</template>

<script>
var myChart
import * as echarts from 'echarts';
    export default {
        data(){
            return{
            tableData: [{
            name: '1',
            sex: '王小虎',
            age: '2819382193',
            phone:'3479824',
            },
            {
            name: '1',
            sex: '王小虎',
            age: '2819382193',
            phone:'3479824',
            },{
            name: '1',
            sex: '王小虎',
            age: '2819382193',
            phone:'3479824',
            },
           
            ],
            tableData1: [{
            weixin: '1',
            phone:'3479824',
            },
            {
            weixin: '1',
            phone:'3479824',
            },
            {
            weixin: '1',
            phone:'3479824',
            },
            ],
            currentPage:1,
            totalPage:5
            }
        },
        methods:{
            //获取路由跳转传递过来的参数
            getData(){
                console.log(this.$route.params.data);
            },
            goPosition(){
                this.$router.push('/positionManage')
            },
            reduce(){
            if(this.currentPage==1) return
            this.currentPage-=1
            },
            add(){
                if(this.totalPage==this.currentPage) return
                this.currentPage+=1
            },
            piechsrt(){
            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose();//销毁
            }
            var chartDom = document.getElementById('pieOne');
            myChart = echarts.init(chartDom);
            var option;
                option = {
                title: {
                    text: '性别',
                    // subtext: 'Fake Data',
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // orient: 'vertical',
                    left: 'center'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };
                option && myChart.setOption(option);
            }
        },
        created(){
            this.getData()
            console.log(111);
        },
        mounted(){
            this.piechsrt()
        }
    }
</script>

<style src="./css/data.css"  scoped></style>